iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0

加入Link

在Next.js 裡使用Link來取代原本的 <a> 標籤
編輯 app\layout.jsx 內容如下

import Link from "next/link";

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <header>
                    <nav>
                        <ul>
                            <li><Link href="/">home</Link></li>
                            <li><Link href="/reviews">reviews</Link></li>
                            <li><Link href="/about">about</Link></li>
                        </ul>
                    </nav>
                </header>
                <main>
                    {children}
                </main>
                <footer> Game data and images courtesy of <a href="https://rawg.io/" target="__blank">RAWG</a></footer>
            </body>
        </html>
    )
}

備註:<footer> </footer> 裡面的內容是遊戲API網站的連結
要用他家提供的資料需要在網頁上放上一個反向連結,這裡就放在頁尾footer
圖片

取消預載

在Next.js 預設都會預載頁面資料加快頁面的讀取速度,但如果要讓頁面資料不要預載
可使用 prefetch={false} 以下用 about頁面連結為範例
(通常不會點進去看的連結適用這個方法節省資料傳輸)
編輯 app\layout.jsx 內容如下:

import Link from "next/link";

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <header>
                    <nav>
                        <ul>
                            <li><Link href="/">home</Link></li>
                            <li><Link href="/reviews">reviews</Link></li>
                            <li><Link href="/about" prefetch={false}>about</Link></li>
                        </ul>
                    </nav>
                </header>
                <main>
                    {children}
                </main>
                <footer> Game data and images courtesy of <a href="https://rawg.io/" target="__blank">RAWG</a></footer>
            </body>
        </html>
    )
}

執行畫面:
圖片
打開 chrome 開發者工具 ~ 檢視 network 的 fetch/XHR 果然就沒有把 about 芋仔進去

在reviews頁面添加其他連結

編輯 app\reviews\page.jsx 內容如下

import Link from "next/link"
function ReviewsPage() {
    return (
        <div>
            <h1>Reviews</h1>
            <ul>
                <li><Link href="/reviews/hollow-knight">Hollow Knight</Link></li>
                <li><Link href="/reviews/stardew-valley">Stardew Valley</Link></li>
            </ul>
        </div>
    )
}
export default ReviewsPage

執行畫面:
圖片
現在頁面都加了差不多了,接下來要進入美化頁面的步驟~


大叔的鐵人賽第六天結束 :)


上一篇
DAY05 - 完成APP路由設定
下一篇
DAY07- 在Next.js的專案中使用Tailwind CSS
系列文
中年大叔(40+)前端自學筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言